@import "./vars.scss";
// 通用结构
.w1100 {
    width: 1100px;
    margin-left: auto;
    margin-right: auto;
}

.w1696 {
    width: 88.3334%;
    max-width: 1696px;
    margin-right: auto;
    margin-left: auto;
}

.hide {
    display: none;
}

.row16 {
    margin-right: -16px;
    margin-left: -16px;
}

.row13 {
    margin-right: -13px;
    margin-left: -13px;
}

.ellipsis {
    display: block;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.cl-select {
    line-height: 59px;
    position: relative;
    &:before {
        content: "\eb8b";
        font-style: normal;
        -webkit-font-smoothing: antialiased;
        -moz-osx-font-smoothing: grayscale;
        font-family: "iconfont" !important;
        font-size: 24px;
        position: absolute;
        top: 50%;
        transform: translateY(-50%);
        right: 15px;
    }
    .cl-datalist {
        cursor: default;
    }
    &.on {
        .cl-select-list {
            display: block;
        }
    }
    .cl-select-list {
        position: absolute;
        top: 59px;
        left: 0;
        right: 0;
        display: none;
        z-index: 999;
        padding: 16px 0;
        background-color: $back3;
        border-radius: 8px;
        li {
            line-height: 32px;
            cursor: pointer;
            padding: 0 16px;
            width: 100%;
            color: #fff;
            &:hover {
                background-color: #314043;
            }
        }
    }
}

// 头部样式
.header-wrap {
    background-color: #fff;
    .header {
        background-color: $back1;
        position: relative;
        overflow: hidden;
        height: 92px;
        border-bottom: 1px solid $border1;
    }
    .topline {
        @include display(flex);
        position: relative;
        overflow: hidden;
        @include justify-content(space-between);
    }
    .topline-left {
        margin-top: 18px;
    }
    .topline-rgiht {
        margin-top: 9px;
        line-height: 1;
        .info-wrap {
            @include display(flex);
            a:hover span {
                text-decoration: underline !important;
            }
        }
        .iwitem {
            @include display(flex);
            @include align-items(center);
            margin-left: 45px;
            &:nth-child(2) {
                margin-left: 39px;
            }
        }
        .iconfont {
            color: $color2;
            font-size: 17px;
            margin-right: 10px;
            &.wjj {
                position: relative;
                top: -1px;
            }
            &.ts {
                font-size: 24px;
                margin-right: 7px;
            }
            &.ht {
                font-size: 12px;
                position: relative;
                top: 1px;
                margin-right: 9px;
            }
        }
    }
    .navline {
        position: relative;
        .inquiry {
            position: absolute;
            right: 0;
            bottom: 25px;
            cursor: pointer;
            color: #fff;
            @include flex-direction(column);
            @include display(flex);
            @include align-items(center);
            @include justify-content(center);
            width: 160px;
            height: 80px;
            line-height: 1;
            background-color: $color3;
            .iconfont {
                font-size: 20px;
                margin-bottom: 3px;
            }
        }
        .nav {
            height: 100%;
            @include display(flex);
            .nvitem {
                &:hover a,
                &:hover .iconfont {
                    color: $color3;
                }
                margin-right: 40px;
                a {
                    height: 65px;
                    @include transition(color .3s);
                    @include display(flex);
                    @include align-items(center);
                }
                &:nth-child(3) {
                    margin-right: 36px;
                }
            }
            .iconfont {
                font-size: 16px;
                margin-right: 7px;
                color: $color1;
                @include transition(color .3s);
                &.sy {
                    position: relative;
                    top: -1px;
                }
                &.qy,
                &.aj {
                    font-size: 18px;
                }
                &.nw {
                    font-size: 22px;
                }
                &.sap {
                    position: relative;
                    top: -1px;
                    font-size: 24px;
                    margin-right: 3px;
                }
                &.cy {
                    font-size: 18px;
                }
                &.fw {
                    font-size: 17px;
                }
            }
        }
    }
}

// 底部样式
.footer {
    font-family: itcbk;
    background-color: $back3;
    color: #fff;
    overflow: hidden;
    position: relative;
    border-top: 1px solid $border2;
    a {
        color: inherit;
    }
    .footer-line {
        @include display(flex);
        @include justify-content(space-between);
        .flogo {
            margin-top: 45px;
        }
        .fl-right {
            @include display(flex);
            margin-top: 49px;
        }
        .fl-right__cirle {
            width: 60px;
            height: 60px;
            line-height: 1;
            font-size: 12px;
            background-color: $color3;
            border-radius: 50%;
            margin-left: 11px;
            cursor: pointer;
        }
        .flrcm {
            height: 100%;
            width: 100%;
            @include display(flex);
            @include align-items(center);
            @include flex-direction(column);
            @include justify-content(center);
            .iconfont {
                font-size: 20px;
                margin-bottom: 3px;
                &.flra {
                    font-size: 16px;
                }
            }
        }
    }
    .footer-body {
        @include display(flex);
        @include justify-content(space-between);
        line-height: 32px;
        margin-top: 37px;
        padding-bottom: 96px;
        border-bottom: 1px solid $color8;
        .fb-dl {
            width: 680px;
            @include flex(680px 0 0);
            @include display(flex);
            @include justify-content(space-between);
        }
        .fb-section {
            @include display(flex);
            @include flex-direction(column);
            @include flex(20% 0 0);
        }
        .fb-dt,
        .fbrh1 {
            margin-top: 5px;
            font-family: sscb;
        }
        .fb-dd,
        .fbrp {
            color: $color8;
        }
        .fb-right {
            text-align: right;
        }
    }
    .copyright {
        color: $color8;
        padding-top: 34px;
        padding-bottom: 53px;
    }
}

[data-scroll-call] {
    position: relative
}

// 通用hover动画
.chover {
    .cword,
    .carrow,
    .pic,
    .cm,
    .tt,
    .dd {
        @include transition(all 0.5s);
    }
}

.chover:hover,
.chover.on {
    .cword {
        color: $color3 !important;
    }
    .carrow {
        color: $color3;
        @include transform(translateX(10px));
    }
    .pic {
        @include transform(scale(1.1));
    }
    .cm {
        @include transform(rotate(180deg));
    }
    .tt {
        @include animation(tt linear 1.1s both);
    }
    .dd {
        @include animation(dd 1s linear);
    }
}

// Q弹效果
.elasticity {
    &:hover {
        animation: elasticity 1s linear;
    }
}

// 全屏loading
#loading {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-color: #fff;
    z-index: 9999;
    .sk-chase {
        position: absolute;
        width: 100px;
        height: 100px;
        top: 50%;
        left: 50%;
        margin-top: -50px;
        margin-left: -50px;
        animation: sk-chase 2.5s infinite linear both;
    }
    .sk-chase-dot {
        width: 100%;
        height: 100%;
        position: absolute;
        left: 0;
        top: 0;
        animation: sk-chase-dot 2s infinite ease-in-out both;
    }
    .sk-chase-dot:before {
        content: "";
        display: block;
        width: 25%;
        height: 25%;
        background-color: #333;
        border-radius: 100%;
        animation: sk-chase-dot-before 2s infinite ease-in-out both;
    }
    .sk-chase-dot:nth-child(1) {
        animation-delay: -1.1s;
    }
    .sk-chase-dot:nth-child(2) {
        animation-delay: -1s;
    }
    .sk-chase-dot:nth-child(3) {
        animation-delay: -0.9s;
    }
    .sk-chase-dot:nth-child(4) {
        animation-delay: -0.8s;
    }
    .sk-chase-dot:nth-child(5) {
        animation-delay: -0.7s;
    }
    .sk-chase-dot:nth-child(6) {
        animation-delay: -0.6s;
    }
    .sk-chase-dot:nth-child(1):before {
        animation-delay: -1.1s;
    }
    .sk-chase-dot:nth-child(2):before {
        animation-delay: -1s;
    }
    .sk-chase-dot:nth-child(3):before {
        animation-delay: -0.9s;
    }
    .sk-chase-dot:nth-child(4):before {
        animation-delay: -0.8s;
    }
    .sk-chase-dot:nth-child(5):before {
        animation-delay: -0.7s;
    }
    .sk-chase-dot:nth-child(6):before {
        animation-delay: -0.6s;
    }
}

// ========================子页面通用========================
.sub-banner {
    height: 575px;
    width: 100%;
    background-repeat: no-repeat;
    background-size: cover;
    background-position: center;
    background-color: #fff;
}

.sub-h2 {
    font-size: 30px;
    font-family: sscb;
    line-height: 1;
    padding-top: 40px;
    padding-bottom: 47px;
    text-align: center;
}

.sub-h4 {
    text-align: center;
    line-height: 24px;
    overflow: hidden;
    margin-bottom: 5px;
}

// 通用分页样式
.pager {
    .pager-num {
        padding: 0 5px;
        height: 28px;
        @include display(flex);
        @include align-items(center);
        @include justify-content(center);
        &.on,
        &:hover {
            color: $color3;
        }
    }
    @include display(flex);
    .pager-prev {
        margin-right: 15px;
    }
    .pager-next {
        margin-left: 15px;
    }
    .pager-prev,
    .pager-next {
        width: 28px;
        height: 28px;
        border: 1px solid $back2;
        @include display(flex);
        @include align-items(center);
        @include justify-content(center);
        background-color: #fff;
        border-radius: 1px;
        @include transition(0.5s);
        color: $color3;
        &.disable {
            color: $color1;
            cursor: not-allowed;
        }
    }
}

// 通用layui表单
.clayui-form-item {
    @include display(flex);
    margin-bottom: 40px;
    .cl-file {
        position: absolute !important;
        right: 12px;
        top: 49px;
        width: 99px;
        height: 106px;
        background-color: #fff;
        .file-input {
            display: none;
        }
        .cl-file-dfn {
            height: 100%;
            @include display(flex);
            @include flex-direction(column);
            @include align-items(center);
            @include justify-content(center);
            @include transition(all 0.3s);
            cursor: pointer;
            &:hover {
                box-shadow: 0 0 3px rgba(0, 0, 0, 0.05);
            }
        }
        .cfd-txt {
            font-size: 17px;
            line-height: 1;
            margin-top: 19px;
            color: $color1;
        }
        .cfdicon {
            font-size: 33px;
            color: $color1;
        }
    }
    .clayui-inline {
        @include display(flex);
        @include flex-direction(column);
        margin: 0;
        @include flex(1);
        &.w397 {
            width: 397px;
            @include flex(397px 0 0);
            margin-right: 47px;
        }
        &.w452 {
            width: 452px;
            @include flex(452px 0 0);
            margin-right: 39px;
        }
    }
    .clayui-form-label {
        width: auto;
        padding: 0;
        text-align: left;
        float: none;
        @include align-self(flex-start);
        position: relative;
        line-height: 1;
        font-size: 19px;
        height: 19px;
        margin-bottom: 15px;
        sup {
            position: absolute;
            right: -10px;
            top: -1px;
        }
    }
    .clayui-submit {
        width: 198px;
        background-color: transparent;
        @include justify-content(center);
        &:hover {
            background-color: $color3;
        }
    }
    &.clayui-form-footer {
        @include justify-content(center);
    }
    .clayui-input-block {
        margin-left: 0;
        position: relative;
    }
    .clayui-input {
        width: 100%;
        border: 0;
        background-color: $back5;
        height: 59px;
        line-height: 59px;
        font-size: 17px;
        font-family: sscr;
        padding: 16px;
        border-radius: 8px;
        color: $color1;
    }
    .clayui-textarea {
        border: 0;
        background-color: $back5;
        height: 200px;
        width: 100%;
        padding: 16px 120px 16px 16px;
        resize: none;
        border-radius: 8px;
        font-size: 17px;
        font-family: sscr;
        color: $color1;
    }
    .clayui-select-inline {
        .layui-input {
            width: 100%;
            border: 0;
            background-color: $back5;
            height: 59px;
            line-height: 59px;
            font-size: 17px;
            font-family: sscr;
            padding: 16px;
            border-radius: 8px;
            color: $color1;
        }
        .layui-form-select dl {
            top: 59px;
        }
    }
}

// 通用表单
.cl-form {
    margin-top: 26px;
    .cl-line {
        @include display(flex);
        margin-bottom: 40px;
    }
    .mt0 {
        margin-bottom: 0 !important;
    }
    .input-group {
        @include display(flex);
        @include flex-direction(column);
        @include flex(1);
        &.w452 {
            width: 452px;
            @include flex(452px 0 0);
            margin-right: 39px;
        }
        &.w397 {
            width: 397px;
            @include flex(397px 0 0);
            margin-right: 47px;
        }
        input {
            width: 100%;
            border: 0;
            background-color: $back5;
            height: 59px;
            line-height: 59px;
            font-size: 17px;
            font-family: sscr;
            padding: 16px;
            border-radius: 8px;
            color: $color1;
        }
        label {
            align-self: flex-start;
            position: relative;
            line-height: 1;
            font-size: 19px;
            height: 19px;
            margin-bottom: 15px;
            sup {
                position: absolute;
                right: -10px;
                top: -1px;
            }
        }
    }
    .cl-textarea-box {
        position: relative;
        .cl-textarea {
            textarea {
                border: 0;
                background-color: $back5;
                height: 200px;
                width: 100%;
                padding: 16px 120px 16px 16px;
                resize: none;
                border-radius: 8px;
                font-size: 17px;
                font-family: sscr;
                color: $color1;
            }
        }
        .cl-file {
            position: absolute !important;
            right: 12px;
            top: 49px;
            width: 99px;
            height: 106px;
            background-color: #fff;
            .file-input {
                display: none;
            }
            .cl-file-dfn {
                height: 100%;
                @include display(flex);
                @include flex-direction(column);
                @include align-items(center);
                @include justify-content(center);
                @include transition(all 0.3s);
                cursor: pointer;
                &:hover {
                    box-shadow: 0 0 3px rgba(0, 0, 0, 0.05);
                }
            }
            .cfd-txt {
                font-size: 17px;
                line-height: 1;
                margin-top: 19px;
                color: $color1;
            }
            .cfdicon {
                font-size: 33px;
                color: $color1;
            }
        }
    }
    .file-name-line {
        display: none;
        justify-content: flex-end;
        .file-name {
            @include display(flex);
            width: 400px;
            .file-name-left {
                width: 90%;
                @include flex(90% 0 0);
            }
            .file-name-right {
                cursor: pointer;
            }
        }
    }
    .btnline {
        @include justify-content(center);
        padding-bottom: 42px;
        margin-top: 40px;
        margin-bottom: 0;
    }
    .cl-submit {
        background-color: transparent;
        width: 198px;
        @include justify-content(center);
        &:hover {
            background-color: $color3;
        }
    }
}

// =======================首页通用========================
// 首页主轮播图
.cSwiper-box {
    height: 575px;
    overflow: hidden;
    background-color: #fff;
    .cSwiper {
        position: relative;
        width: 100%;
        height: 100%;
    }
    .cSwiper-wrapper {
        position: absolute;
        left: 0;
        top: 0;
        bottom: 0;
        right: 0;
    }
    .cSwiper-slide {
        position: relative;
        width: 100%;
        height: 100%;
        overflow: hidden;
    }
    .cSwiper-inner {
        position: absolute;
        width: 100%;
        height: 100%;
        left: 0;
        top: 0;
        background-size: cover;
        background-position: center;
        display: -webkit-box;
        display: -ms-flexbox;
        display: -webkit-flex;
        display: flex;
    }
    .svgbox {
        height: 100%;
        position: relative;
        &::after {
            content: "";
            position: absolute;
            top: 0;
            right: 64px;
            width: 1px;
            background-color: rgba(255, 255, 255, 0.5);
            bottom: 0;
            z-index: 8;
        }
    }
    .xxx {
        color: #fff;
        font-size: 12px;
        position: absolute;
        top: 224px;
        right: 0;
        width: 130px;
        height: 130px;
        z-index: 9;
        span {
            width: 35px;
            height: 18px;
            text-align: center;
            position: absolute;
            top: 50%;
            left: 50%;
            letter-spacing: 5px;
            margin-left: -14px;
            margin-top: -9px;
        }
        .cSwiper-svg {
            position: absolute;
            top: 0;
            right: 0;
            z-index: 9;
            width: 130px;
            height: 130px;
            @include transform(rotate(-90deg));
            stroke-dasharray: 0, 377;
            @include transition(all 1s linear);
            &.cSwiper-svg1 {
                stroke-dasharray: 377, 377;
            }
        }
    }
    .csi-drag {
        position: absolute;
        top: 208px;
        z-index: 9;
        width: 445px;
        height: 177px;
        background-image: url("../image/banner-svg.png");
        background-repeat: no-repeat;
        color: #fff;
        padding: 30px 27px 0 21px;
        line-height: 1;
        .csi-h3 {
            vertical-align: baseline;
            font-family: sscb;
            font-size: 19px;
            strong {
                font-family: itcdi;
                font-size: 35px;
                color: $color7;
                margin-left: 5px;
            }
        }
        .csi-p {
            margin-top: 8px;
            font-size: 16px;
        }
        .btnline {
            @include display(flex);
            @include justify-content(space-between);
            margin-top: 20px;
            .iconfont {
                font-size: 20px;
                margin-right: 5px;
                &.btnwjj {
                    font-size: 18px;
                }
            }
            .btn {
                background-color: #fff;
                @include display(flex);
                @include align-items(center);
                @include justify-content(center);
                color: $color3;
                width: 191px;
                height: 52px;
                border: 2px solid $color3;
                @include transition(all 0.5s);
                &:hover,
                &.active {
                    background-color: $color3;
                    color: #fff;
                }
            }
        }
    }
}

// 首页通用 more
.index_head {
    @include display(inline-flex);
    @include flex-direction(column);
    margin: 40px auto 0;
    text-align: center;
    line-height: 1;
    .index_title {
        font-size: 30px;
        word-spacing: 25px;
        font-family: sscb;
    }
    .index_subtitle {
        margin-top: 15px;
        font-family: sscr;
    }
    .index_more {
        @include display(flex);
        @include justify-content(center);
        margin-top: 23px;
        font-family: sscr;
        color: $color3;
    }
}

// 首页内容内的详细+右箭头
.index_xx {
    @include display(flex);
    @include align-items(center);
    cursor: pointer;
    line-height: 22px;
    font-size: 17px;
    .cmm {
        margin-left: 15px;
        font-size: 22px;
    }
}

// 首页通用btn
.index_btn {
    cursor: pointer;
    @include display(inline-flex);
    @include align-items(center);
    @include user-select(none);
    font-size: 17px;
    line-height: 20px;
    padding: 21px 34px 20px;
    color: $color3;
    border: 1px solid $color3;
    @include transition(all 0.5s);
    .idb {
        font-size: 22px;
        margin-left: 20px;
        color: inherit;
    }
    &:hover,
    &.on {
        background-color: $color3;
        color: #fff;
        .idb {
            color: inherit !important;
        }
    }
}